<template>
  <n-data-table :data="plugin_list" :columns="columns" />
</template>

<script>
  import { h } from 'vue-demi';
  import axios from 'axios';
  import { NButton, useMessage } from 'naive-ui';
  const createColumns = ({ play }) => {
    return [
      {
        title: '插件名',
        key: 'name',
      },
      {
        title: '发布性质',
        key: 'offical',
      },
      {
        title: '操作',
        key: 'actions',
        render(row) {
          return h(
            NButton,
            {
              strong: true,
              tertiary: true,
              onClick: () => play(row),
            },
            { default: () => '编写' }
          );
        },
      },
    ];
  };

  export default {
    data() {
      return {
        plugin_list: [],
        columns: [],
      };
    },
    mounted() {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const that = this;
      axios.post('/api/plugin/get', {}).then(function (res) {
        if (res.data.code == 200) {
          that.plugin_list = res.data.data.concat([]);
        }
      });
      this.columns = createColumns({
        play(row) {
          axios.get('/api/plugin/write?name=' + encodeURIComponent(row.name)).then(function (res) {
            if (res.data.can != 'yes') {
              that.message.error('该插件未留下源文件，不可编写！');
            } else {
              window.location.href = '/plugin/write?name=' + encodeURIComponent(row.name);
            }
          });
        },
      });
    },
    setup() {
      const message = useMessage();
      return {
        message,
      };
    },
  };
</script>
